<template>
    <div class="M-preview" v-if="config" v-show="show">
        <swipe class="M-previewSwipe" 
        :speed="config.speed"
        :auto="config.auto" 
        :continuous="config.continuous" 
        :default-index="config.defaultIndex">
            <swipe-item class="M-previewItem" v-for="(item,index) in data" :key="index" @click.prevent.stop="hide">
                <div class="img">
                    <img :src="item.url"/>
                </div>
            <swipe-item>
        </swipe>
        <div class="M-previewCount">{{config.cur}}/{{data.length||0}}</div>
    </div>
</template>

<script>
//指定是否自动播放，是否循环，循环播放间隔、指定打开地几张图片
export default {
    props: {
        config: {
            type: Object,
            default: {
                auto: false,   //是否自动播放
                continuous: false,   //是否循环播放
                defaultIndex: false,   //当前打开第几章
                speed: 2000   //轮播间隔
            } 
        },
        data: {
            type: Array,
            default: []
        },
        show: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        hide: function(){
            this.show = false;
        }
    }
};
</script>

<style scoped lang="less">
.M-preview{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    &Swipe{
        width:100%;
        height: 100%; 
    }
    &Item{
        display: flex;
        align-items: center;
        justify-content: center;
        img{
            max-width: 100%;
            max-height: 100%;
            width:auto;
            height: auto;
        }
    }
    &Count{
        @h: 40/28rem;
        position: absolute;
        bottom: 40/28rem;
        background: rgba(0,0,0,.5);
        padding: 0 20/28rem;
        line-height: @h;
        height: @h;
        border-radius: @h*.5;
        color: #fff;
        left: 50%;
        transform: translate(-50%,0);
    }
}
</style>